<template>    
   <div class="h-swiper">
       <swiper :options="swiperOption" >
        
        <swiper-slide v-for='item in swiperList' :key="item.id">
            <img :src="item.imgUrl" alt="">
        </swiper-slide>
       
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
   </div>
</template>
    
<script type='text/javascript'>
    export default {
        props:["swiperList"],
        data(){
            return{
                
                swiperOption:{
                    pagination: {
                        el: '.swiper-pagination'
                        
                    },
                    loop:true
                }
            }
        }
}
</script>
<style  scoped >
    .h-swiper{
        background-color:#ddd;
        height:0;
        padding-bottom:26.67%;
    }
    .h-swiper img {
        width:100%;
        height:100%;
    }
           
    .h-swiper>>>.swiper-pagination-bullet-active{
        background-color:#fff;
    }
</style>
